<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="我的关注"></u-navbar> -->
		<view class="fixed-top bg-white">
			<view class="px-2 mt-2 pb-2 dfes">
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="keyword" :action-style="actionStyle" @input="search"></u-search>
			</view>
			<view class="px-3 tab-items" v-for="(item,index) in tabList" :id="'tab'+index" @click="changeTabList(index)"
				:key="index">
				<view class="font-md" :class="tabIndexList === index ? 'text-8ED0F2 font-weight-bold font-lg':''">
					{{item.name}}
				</view>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>

		</view>
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px)" :show-scrollbar="false"
			@scrolltolower="loadMore" @scrolltoupper="refresh">
			<view style="margin-top: 119px;">
				<view class="dfex mt-5 pl-2 pr-2" v-for="(item, index) in (tabIndexList === 0 ? newlist : agriculture)"
					:key="`${index}${item.isFollow}`">
					<view @click="tabIndexList === 0? open(item.id) : ''">
						<view class="dfel" v-if="item.abnormal === true">
							<view class="text-BD3124">{{ item.enterpriseName || '-' }}</view>
							<view  class="ml-2 bg-F5C9C5 text-BD3124 pl-1 pr-1 rounded">异常</view>
						</view>
						<view class="dfel" v-else>
							<view class="text-333333">{{ item.enterpriseName || '-' }}</view>
						</view>

						<view class="dfes mt-1">
							<view class="mr-2 p font-12 rounded bg-FCE07F "
								v-if="item.agricultureLabel && item.agricultureLabel.length > 0"
								v-for="(label, index) in item.agricultureLabel" :key="index">
								<view class="text-FFC251">{{ label }}</view>
							</view>
						</view>

					</view>
					<view v-if="tabIndexList === 1" class="bg-78AB06 py-1 pr-3 pl-3 rounded-circle font-14 text-white"
						@click="theFollow(item)">关注</view>

					<view v-if="tabIndexList === 0" class="bg-CECECE py-1 pr-3 pl-3 rounded-circle font-14 text-white"
						@click="unFollow(item)">
						不再关注</view>
				</view>
			</view>
			<view v-if="!hasMore && newlist.length > 0 || agriculture.length > 0" class="text-center mt-3 mb-3 pb-2">
				<view class="text-muted">没有更多数据了</view>
			</view>
			<view v-else-if="!hasMore && newlist.length === 0 || agriculture.length === 0" class="text-center mt-3 mb-3">
				<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
				<view class="text-999999 font-15">暂时木有内容呀~~</view>
			</view>
			<view v-else class="text-center mt-3 mb-3">
				<view class="btn btn-primary">加载更多</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js'
	export default {
		data() {
			return {
				keyword: '',
				actionStyle: {
					color: '#8ED0F2',
				},
				tabList: [{
						"id": 1,
						"name": "我的关注",
					},
					{
						"id": 2,
						"name": "涉农主体",
					},
				],
				currentTab: 0,
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
				params: {},
				tabIndex: 0,
				tabIndexs: 0,
				tabIndexList: 0,
				currentTab: 0,
				newlist: [],
				agriculture: [],
			}
		},

		onShow() {
			this.getList();
			this.newlist = [];
			this.agriculture = [];
		},
		methods: {

			changeTabList(index) {
				if (this.tabIndexList === index) return;
				this.tabIndexList = index;
				this.getList();
				this.newlist = [];
				this.agriculture = [];
			},
			open(id) {
				uni.navigateTo({
					url: `/pages/tabbar/user/followDetails?id=${id}`,
				})
			},
			setDefaultPageConfig() {
				this.form.pageNo = 1
				this.form.pageSize = 10
				this.form.total = 0
			},
			search() {
				if (this.keyword.trim() === '') {
					this.hasMore = true;
					this.newlist = []; // 清空列表数据
					this.agriculture = [];
					this.setDefaultPageConfig();
					this.getList();
					return;
				}
				this.newlist = [];
				this.agriculture = [];
				this.setDefaultPageConfig();
				this.getList();
			},

			getList() {
			    const api = this.tabIndexList === 0 ? '/brand/user/down/myFollowList' :
			        '/brand/user/down/agricultureList';
			    const data = {
			        ...this.form,
			        enterpriseName: this.keyword.trim(),
			    };
			    $H.get(api, data).then(res => {
			        if (res.result !== null) {
			            const list = this.tabIndexList === 0 ? this.newlist : this.agriculture;
			            res.result.records.forEach(record => {
			                // 将字符串转换为数组
			                if (record.agricultureLabel && typeof record.agricultureLabel === 'string') {
			                    record.agricultureLabel = record.agricultureLabel.split(',');
			                    // 限制最多只显示三个标签
			                    record.agricultureLabel = record.agricultureLabel.slice(0, 5);
			                }
			                list.push(record);
			            });
			            this.form.total = res.result.total;
			            this.hasMore = list.length < this.form.total;
			            this.page++;
			        } else {
			            // 处理结果为 null 的情况，例如显示“暂无数据”
			            console.log('No data available');
			        }
			    }).catch(error => {
			        console.log(error)
			    });
			},





			// 加载更多
			loadMore() {

				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.getList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.newlist = [];
				this.agriculture = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.getList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},
			theFollow(item) {
				$H.post(
					`/brand/user/down/follow`, {
						id: item.id
					}, {
						token: true,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
					}
				).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '关注成功',
							icon: 'none',
						})
						// 清空列表数据
						this.newlist = [];
						this.agriculture = [];
						this.getList()
					}
				})
			},
			unFollow(item) {
				$H.post(
					`/brand/user/down/unfollow`, {
						id: item.id
					}, {
						token: true,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
					}
				).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '已取消关注',
							icon: 'none',
						})
						// 清空列表数据
						this.newlist = [];
						this.agriculture = [];
						this.getList()
					}
				})
			},
		},
	}
</script>

<style>
	.tab-items {
		width: 50%;
		font-size: 16px;
		display: inline-block;
		text-align: center;
		padding: 0 10px;
		line-height: 40px;
	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>